
/*
获取用户信息
  1：定义api
  2:导入api （vuex的user模块）
  3:在actions中定义一个方法用于获取用户信息关存储
  4：在导航守卫中触发actions方法调用

获取完整用户信息
1：定义api
2:导入api
3:调用api获取数据
4：合并 数据并存储
5：渲染数据
*/
import { sysProfile, sysUser } from '@/api/user'
import router, { otherRoutes, constantRoutes, resetRouter } from '@/router'
// import router from '@/router'
const state = {
  token: '',
  userInfo: ''
}
const mutations = {
  SETTOKEN(state, value) {
    state.token = value
  },
  SETUSERINFO(state, value) {
    state.userInfo = value
  },
  LOGOUT(state) {
    state.token = ''
    state.userInfo = ''
    // 退出登录时重置路由
    resetRouter()
  }
}
const actions = {
  async  getUserInfo(ctx) {
    const res = await sysProfile() // res.data
    const res2 = await sysUser(res.data.userId) // res2.data

    // 对象合并
    const res3 = { ...res.data, ...res2.data }
    ctx.commit('SETUSERINFO', res3)
    // console.log('用户信息', res)
    // 拿到用户信息：将权限数据与动态路由匹配，将匹配数据添加到路由配制中
    // 权限数据 res3.roles.menus ['salarys']
    // 动态路由：otherRoutes   [{meta:{code:'salarys'}},{...}]
    const newArr = otherRoutes.filter(item => {
      //  return Boolean 判断item.meta.code在权限数据中是否存在，存在，return true  不存在return false
      // if (res3.roles.menus.includes(item.meta.code)) {
      //   return true
      // } else {
      //   return false
      // }
      return res3.roles.menus.includes(item.meta.code)
    })
    // 将匹配数据添加到路由配制中 路由有一个方法 叫  router.addRoutes([....]) 添加数据到路由配制中
    newArr.push({ path: '*', redirect: '/404', hidden: true })
    router.addRoutes(newArr)
    // addRoutes添加的路由this.$router.options.routes不会动态更新，可以手动更新this.$router.options.routes就可以了
    // router.options.routes = [静态路由+动态路由（匹配后的路由）]
    /*
      解决菜单渲染坑点：
        原因：菜单是通过this.$router.options.routes渲染的，但是addRoutes添加路由后，它并不会响应式更新，需要手动更新
        解决：在动态路由匹配添加后手动更新this.$router.options.routes
    */
    // router.options.routes.push(...newArr)
    router.options.routes = [...constantRoutes, ...newArr]

    /*
    addRoutes添加的路由不能立马使用，需要再走一次导航守卫,
      出现问题：动态路由的页面刷新就跳转到404
      解决：
         1：将404重定向通过addRoutes添加
         2：在动态路由匹配完后加入next(to)，让路由再走一次导航守卫

    vue2导入组件 .vue
    vue3  vite脚手架导入组件一定要写.vue   设计如此

    */

    console.log('匹配后的动态路由', newArr)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

